<template>
	<view class="login-container">
		<!-- 动态渐变背景 -->
		<view class="bg-gradient"></view>
		<!-- 装饰元素 -->
		<view class="decor decor-1"></view>
		<view class="decor decor-2"></view>
		<view class="decor decor-3"></view>

		<!-- 玻璃拟态登录卡片 -->
		<view class="login-card">
			<!-- 标题区域 -->
			<view class="login-header">
				<text class="login-title">欢迎回来</text>
				<text class="login-desc">请登录您的账号继续体验</text>
			</view>

			<!-- 登录表单 -->
			<view class="login-form">
				<!-- 用户名输入（带动画反馈） -->
				<view class="form-group" :class="{ focused: usernameFocus }">
					<view class="input-box">
						<icon type="person" size="26" :color="usernameFocus ? '#007AFF' : '#999'"></icon>
						<input type="text" v-model="username" placeholder="输入用户名" placeholder-style="color:#ccc"
							@focus="usernameFocus = true" @blur="usernameFocus = false" @input="validateUsername" />
					</view>
					<text class="error-tip" v-if="showUsernameError">{{ usernameError }}</text>
				</view>

				<!-- 密码输入（带动画反馈） -->
				<view class="form-group" :class="{ focused: passwordFocus }">
					<view class="input-box">
						<icon type="lock" size="26" :color="passwordFocus ? '#007AFF' : '#999'"></icon>
						<input :type="showPwd ? 'text' : 'password'" v-model="password" placeholder="输入密码"
							placeholder-style="color:#ccc" @focus="passwordFocus = true" @blur="passwordFocus = false"
							@input="validatePassword" />
						<icon :type="showPwd ? 'eye-o' : 'eye'" size="26" color="#999" @click="showPwd = !showPwd"
							class="toggle-icon"></icon>
					</view>
					<text class="error-tip" v-if="showPasswordError">{{ passwordError }}</text>
				</view>

				<!-- 记住密码+忘记密码 -->
				<view class="form-actions">
					<label class="remember-label">
						<checkbox v-model="remember" color="#007AFF" class="remember-checkbox"></checkbox>
						<text class="remember-text">记住密码</text>
					</label>
					<text class="forgot-pwd" @click="showForgotTip">忘记密码？</text>
				</view>

				<!-- 登录按钮（修复 loading 组件问题，改用 uni-app 内置 icon） -->
				<button class="login-btn" @click="handleLogin" :disabled="!isFormValid || loginLoading"
					:class="{ disabled: !isFormValid || loginLoading }">
					<icon type="loading" size="20" color="#fff" v-if="loginLoading"></icon>
					<text v-if="loginLoading" style="margin-left: 10rpx;">登录中...</text>
					<text v-else>登录</text>
				</button>
				<!-- 注册跳转（带下划线动画） -->
				<view class="register-link">
					<text>还没有账号？</text>
					<navigator url="/pages/register/register" class="register-text">
						立即注册
						<view class="underline"></view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				showPwd: false,
				remember: false,
				usernameFocus: false, // 用户名输入框焦点状态
				passwordFocus: false, // 密码输入框焦点状态
				showUsernameError: false,
				showPasswordError: false,
				usernameError: '',
				passwordError: '',
				loginLoading: false // 登录加载状态
			};
		},
		computed: {
			// 表单是否合法
			isFormValid() {
				return this.username.trim() !== '' && this.password.trim() !== '' &&
					!this.showUsernameError && !this.showPasswordError;
			}
		},
		methods: {
			// 用户名验证
			validateUsername() {
				if (this.username.trim() === '') {
					this.showUsernameError = true;
					this.usernameError = '用户名不能为空';
				} else {
					this.showUsernameError = false;
				}
			},
			// 密码验证
			validatePassword() {
				if (this.password.trim() === '') {
					this.showPasswordError = true;
					this.passwordError = '密码不能为空';
				} else if (this.password.length < 6) {
					this.showPasswordError = true;
					this.passwordError = '密码长度不能少于6位';
				} else {
					this.showPasswordError = false;
				}
			},
			// 忘记密码提示
			showForgotTip() {
				uni.showToast({
					title: '请联系管理员重置密码',
					icon: 'none',
					duration: 2000
				});
			},
			// 核心登录逻辑（适配TabBar状态切换）
			handleLogin() {
				// 主动校验表单
				this.validateUsername();
				this.validatePassword();
				if (!this.isFormValid) return;

				// 模拟登录加载
				this.loginLoading = true;

				// 读取注册用户（与注册页面数据同步）
				const users = uni.getStorageSync('registeredUsers') || [];
				const matchedUser = users.find(u =>
					u.username === this.username.trim() && u.password === this.password.trim()
				);

				// 模拟接口请求延迟
				setTimeout(() => {
					this.loginLoading = false;
					if (matchedUser) {
						// 1. 保存登录状态和用户信息
						uni.setStorageSync('isLogin', true);
						uni.setStorageSync('currentUser', matchedUser);

						// 2. 记住密码逻辑
						if (this.remember) {
							uni.setStorageSync('saveUser', {
								username: this.username.trim(),
								password: this.password.trim()
							});
						} else {
							uni.removeStorageSync('saveUser');
						}

						// 3. 登录成功提示（优化动画体验）
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 1200
						});

						// 4. 跳转至TabBar首页（新闻页面），并更新TabBar文字
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/demos/cardViewPage/cardViewPage",
								success: () => {
									// 5. 关键：更新TabBar的“未登录”为“我的”
									uni.setTabBarItem({
										index: 3, // TabBar中“我的”所在索引（第4个选项）
										text: "我的",
										iconPath: "/static/mine-selected.png", // 登录后选中图标
										selectedIconPath: "/static/mine-selected.png"
									});
								}
							});
						}, 1200);
					} else {
						// 登录失败抖动反馈
						this.shakeForm();
						uni.showToast({
							title: '用户名或密码错误',
							icon: 'none',
							duration: 2000
						});
					}
				}, 1500);
			},
			// 登录失败表单抖动动画（兼容uni-app环境）
			shakeForm() {
				const form = uni.createSelectorQuery().in(this).select('.login-form');
				form.fields({
					size: true
				}, (res) => {
					const formDom = document.querySelector('.login-form');
					if (formDom) {
						formDom.style.animation = 'shake 0.5s ease';
						setTimeout(() => {
							formDom.style.animation = '';
						}, 500);
					}
				}).exec();
			}
		},
		onLoad() {
			// 读取记住的密码（页面加载时自动填充）
			const savedUser = uni.getStorageSync('saveUser');
			if (savedUser) {
				this.username = savedUser.username;
				this.password = savedUser.password;
				this.remember = true;
			}
		}
	};
</script>

<style scoped>
	/* 全局动画定义 */
	@keyframes shake {

		0%,
		100% {
			transform: translateX(0);
		}

		20% {
			transform: translateX(-10rpx);
		}

		40% {
			transform: translateX(10rpx);
		}

		60% {
			transform: translateX(-5rpx);
		}

		80% {
			transform: translateX(5rpx);
		}
	}

	.login-container {
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	/* 动态渐变背景 */
	.bg-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		z-index: 0;
		animation: gradientShift 15s ease infinite;
		background-size: 200% 200%;
		/* 渐变动画关键属性 */
	}

	@keyframes gradientShift {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	/* 装饰元素 */
	.decor {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		filter: blur(50rpx);
		animation: float 8s ease-in-out infinite;
	}

	.decor-1 {
		width: 400rpx;
		height: 400rpx;
		top: 10%;
		left: 10%;
		animation-delay: 0s;
	}

	.decor-2 {
		width: 500rpx;
		height: 500rpx;
		bottom: 10%;
		right: 10%;
		animation-delay: 2s;
	}

	.decor-3 {
		width: 300rpx;
		height: 300rpx;
		top: 60%;
		left: 20%;
		animation-delay: 4s;
	}

	@keyframes float {
		0% {
			transform: translateY(0) translateX(0);
		}

		50% {
			transform: translateY(-30rpx) translateX(30rpx);
		}

		100% {
			transform: translateY(0) translateX(0);
		}
	}

	/* 玻璃拟态卡片 */
	.login-card {
		width: 100%;
		max-width: 550rpx;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
		border-radius: 30rpx;
		padding: 80rpx 40rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
		position: relative;
	}

	/* 标题区域 */
	.login-header {
		text-align: center;
		margin-bottom: 80rpx;
	}

	.login-title {
		font-size: 42rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		display: block;
	}

	.login-desc {
		font-size: 24rpx;
		color: #666;
		opacity: 0.8;
	}

	/* 表单区域 */
	.login-form {
		display: flex;
		flex-direction: column;
		gap: 35rpx;
	}

	.form-group {
		transition: all 0.3s ease;
	}

	/* 输入框焦点状态 */
	.form-group.focused .input-box {
		border-color: #007AFF;
		box-shadow: 0 0 0 2rpx rgba(0, 122, 255, 0.2);
	}

	.input-box {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 96rpx;
		background: rgba(255, 255, 255, 0.8);
		border: 2rpx solid #eee;
		border-radius: 48rpx;
		transition: all 0.3s ease;
	}

	.input-box input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		color: #333;
		margin: 0 20rpx;
	}

	.toggle-icon {
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	.toggle-icon:active {
		transform: scale(0.9);
	}

	/* 错误提示 */
	.error-tip {
		font-size: 22rpx;
		color: #F53F3F;
		margin-left: 30rpx;
		margin-top: 8rpx;
		display: block;
	}

	/* 表单操作区 */
	.form-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
	}

	.remember-label {
		display: flex;
		align-items: center;
		gap: 15rpx;
		font-size: 24rpx;
		color: #666;
	}

	.remember-checkbox {
		transform: scale(1.2);
	}

	.forgot-pwd {
		font-size: 24rpx;
		color: #007AFF;
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.forgot-pwd:active {
		color: #0051AA;
	}

	/* 登录按钮 */
	.login-btn {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(90deg, #007AFF 0%, #00C6FF 100%);
		border-radius: 50rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.3);
		transition: all 0.3s ease;
	}

	.login-btn:not(.disabled):active {
		transform: scale(0.98);
		box-shadow: 0 5rpx 15rpx rgba(0, 122, 255, 0.2);
	}

	.login-btn.disabled {
		background: #ccc;
		box-shadow: none;
	}

	/* 注册链接 */
	.register-link {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #666;
	}

	.register-text {
		color: #007AFF;
		font-weight: 500;
		position: relative;
		padding-bottom: 5rpx;
	}

	/* 下划线动画 */
	.underline {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 2rpx;
		background: #007AFF;
		transition: width 0.3s ease;
	}

	.register-text:active .underline {
		width: 100%;
	}
</style>